<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        直接引入vue.js文件网址 -->
        <script src="./js/vue.global.js"></script>
        <!-- 本地导入 -->
        <style>
            .h1 {
                color: red;;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
            }
            #box {
                border:2px solid black;
                padding-left: 2%;
                padding-right: -5%;
            }
            .h1 {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #counter {
                /* display: flex; */
                justify-content: center;
                align-items: center;
                border: 2px solid white;
                border-radius: 15%;
                padding-left: 10%;
                padding-right: 20%;
            }
            .text-center {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <h3 class="h1">个人基本信息</h3>
            <div id="counter" class="text-center">
                <!-- <p v-text="name"></p> -->
                <p>姓名：{{  name  }}</p>
                <!-- <p v-text="year"></p> -->
                <p>年龄：{{  year  }}</p>
                <!-- <p v-text="hobby"></p> -->
                <p>兴趣爱好：{{  hobby  }}</p>
                <!-- <p v-text="major"></p> -->
                <p>专业：{{  major  }} </p>
            </div>
        </div>
    </body>
    <script>
        // 使box居中
        const box = document.getElementById('box');
        const width1 = 400;
        const height1 = 300;

        box.style.width = `${width1}px`;
        box.style.height = `${height1}px`;

        // 使counter居中
        const counter = document.getElementById('counter');
        const width2 = 250;
        const height2 = 200;

        counter.style.width = `${width2}px`;
        counter.style.height = `${height2}px`;
        counter.style.backgroundColor = '#FFB74D';

        

        const Counter = {
            data() {
                return {
                    name: '杨健',
                    year: 20,
                    hobby: '玩游戏,听音乐,吃饭,睡觉',
                    major: '软件技术'
                }
            }
        }
        Vue.createApp(Counter).mount('#counter')
    </script>
</html>